<template>
    <div class="card w-100% h-100%">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="用户名" prop="label">
                        <el-input v-model="searchForm.label" placeholder="请输入用户名" clearable
                            @keyup.enter="search()"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search()" :icon="Search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table border :data="tableData" style="width: 100%">
                    <el-table-column label="用户" prop="label" />
                    <el-table-column label="操作" prop="value" width="100" fixed="right">
                        <template #default="scope">
                            <div class="flex justify-center">
                                <el-button type="primary" @click="handleClick(scope.row)">踢出</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="mt-5">
            <el-pagination v-model:current-page="searchForm.current" v-model:page-size="searchForm.size"
                layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 50, 100, 200, 500]" :total="total"
                @size-change="handleSizeChange" :background="true" @current-change="handleCurrentChange" />
        </el-row>
    </div>
</template>
<script setup>
defineOptions({
  name: 'onlineUser',
});
import { onMounted, ref } from "vue";
import { getOnlineUsers } from "@/api/modules/dict";
import { forceLogout } from "@/api/modules/login";
import { ElMessage } from "element-plus";
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'
const searchForm = ref({
    label: "",
    size: 10,
    current: 1,
});
const search = () => {
    getOnlineUsers(searchForm.value).then(res => {
        if (res.code === 200) {
            tableData.value = res.data.others
            total.value = res.data.total
        }
    });
};
const tableData = ref([]);
const total = ref(0);
const handleSizeChange = val => {
    searchForm.value.size = val;
    search();
};
const handleCurrentChange = val => {
    searchForm.value.current = val;
    search();
};
const handleClick = row => {
    forceLogout(row.value).then(res => {
        if (res.code === 200) {
            ElMessage.success("踢出成功");
            search();
        }
    });
};
onMounted(() => {
    search();
});
</script>